<template>
  <div class="modal" v-show="visible">
    <div>
      User name:
      <input v-model="info.name" />
    </div>
    <!-- Other information -->
    <button @click="handleCancel">Cancel</button>
    <button @click="handleConfirm">Submit</button>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, provide } from 'vue'

  const visible = ref<boolean>(false)
  const info = reactive({
    name: ''
  })

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let resolveFn: Function = () => {}
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let rejectFn: Function = () => {}

  provide('getInfoByModal', () => {
    visible.value = true

    return new Promise((resolve, reject) => {
      resolveFn = resolve
      rejectFn = reject
    })
  })

  const handleConfirm = () => {
    resolveFn && resolveFn(info)
  }

  const handleCancel = () => {
    rejectFn && rejectFn(new Error('User has canceled'))
  }
</script>

<style lang="less" scoped></style>
